<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h3><img src="@/assets/logo2.png" alt="" class="logo" />学员管理系统</h3>
      </div>
      <div class="content">
        <img src="@/assets/slogan.png" alt="" class="left" />
        <div class="right">
          <div>
            <h5>欢迎{{title}}</h5>
          </div>
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item prop="username">
              <el-input type="text" v-model="ruleForm.username" autocomplete="off" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off" prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')" style="width:100%">{{title}}</el-button>
              <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
          </el-form>
          <slot></slot>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  data () {
    const username = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('用户名不能为空'))
      } else if (this.str.test(value)) {
        callback()
      } else {
        callback(new Error('用户名不合法'))
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.username !== '') {
          this.$refs.ruleForm.validateField('username')
        }
        callback()
      }
    }
    return {
      ruleForm: {
        password: '',
        username: ''
      },
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' }],
        username: [{ validator: username, trigger: 'blur' }]
      },
      str: /[A-Za-z0-9_\-\u4e00-\u9fa5]+/
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.ruleForm)
        } else {
          this.$message.error('数据不能为空')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.logo {
  height: 50px;
}
.box-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 600px;
}
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.right {
  flex: 3;
  margin: 80px;
}
.left {
  flex: 2;
  margin-left: 50px;
}
</style>
